<template>
  <body>
    <div class="__nuxt">
      <div class="login">
        <div class="login-left">
          <div class="login-left-card">
            <div class="card-type">
              <!-- 移除微信登录切换按钮 -->
            </div>

            <div class="card-header">
              <img
                src="/src/assets/images/kkLogo.png"
                class="card-header-logo"
                @click="openPage"
              />
              <div class="card-header-title">康康邮箱</div>
              <div class="card-header-tips">专业邮件服务商</div>
            </div>

            <div class="card-main">
              <!-- <div
                class="tabs"
                :style="{ '--912be86e': '401px', '--6a23be95': '4px' }"
              >
                <div
                  v-for="(item, index) in tabsItems"
                  :key="index"
                  class="tabs-item"
                  :class="{ active: currentActiveIndex === index }"
                  @click="handleTabClick(index)"
                >
                  {{ item }}
                </div>

                <div class="bg left" :style="{ left: bgLeft + 'px' }"></div>
              </div> -->

              <div style="position: relative; top: 40px">
                <div class="card-main-input">
                  <form class="el-form el-form-default el-form-label-right">
                    <div
                      class="el-form-item is-required asterisk-left el-form-item-label-right"
                    >
                      <div class="el-form-item__content">
                        <div class="el-input">
                          <div class="el-input__wrapper" tabindex="-1">
                            <input
                              v-model="phoneNumber"
                              class="el-input__inner"
                              type="text"
                              autocomplete="off"
                              tabindex="0"
                              placeholder="请输入手机号"
                            />
                          </div>
                        </div>
                        <div
                          v-if="
                            !isPhoneValid &&
                            (phoneNumber.length > 0 || submited)
                          "
                          class="el-form-item__error"
                        >
                          请输入有效的手机号!
                        </div>
                      </div>
                    </div>
                    <div
                      class="el-form-item is-error is-required asterisk-left el-form-item-label-right"
                    >
                      <div class="el-form-item__content">
                        <div class="el-input">
                          <div class="el-input__wrapper" tabindex="-1">
                            <input
                              v-model="password"
                              class="el-input__inner"
                              type="text"
                              autocomplete="off"
                              tabindex="0"
                              placeholder="请输入密码"
                            />
                          </div>
                        </div>
                        <div
                          v-if="
                            !isPasswordValid &&
                            (password.length > 0 || submited)
                          "
                          class="el-form-item__error"
                        >
                          请输入有效的密码!
                        </div>
                      </div>
                    </div>
                  </form>
                </div>

                <div class="card-main-tip">首次验证通过即注册邮箱账号</div>

                <div class="card-main-footer" @click="toggleCheckbox">
                  <label class="el-checkbox el-checkbox-small">
                    <input
                      class="el-checkbox__input"
                      type="checkbox"
                      v-model="isChecked"
                    />
                  </label>

                  <div class="card-main-footer-msg footer-padding-top-18">
                    我已阅读并同意《
                    <span>
                      <a
                        href="https://staging.zhihaoscm.cn/public/article/2"
                        target="_blank"
                        @click.stop
                        >用户协议</a
                      >
                    </span>
                    》和《
                    <span>
                      <a
                        href="https://staging.zhihaoscm.cn/public/article/3"
                        target="_blank"
                        @click.stop
                        >隐私政策</a
                      >
                    </span>
                    》,允许链云管理本人账号信息
                    <div v-if="!isChecked" class="error-msg">请勾选协议</div>
                  </div>
                </div>

                <div class="card-main-btn">
                  <button
                    @click="loginJump"
                    aria-disabled="false"
                    type="button"
                    class="el-button"
                    :disabled="isLoginDisabled"
                    style="
                      --el-button-bg-color: #ffdb5c;
                      --el-button-text-color: var(--el-color-black);
                      --el-button-border-color: #ffdb5c;
                      --el-button-hover-bg-color: rgb(255, 230, 141);
                      --el-button-hover-text-color: var(--el-color-black);
                      --el-button-hover-border-color: rgb(255, 230, 141);
                      --el-button-active-bg-color: rgb(208, 179, 78);
                      --el-button-active-border-color: rgb(208, 179, 78);
                    "
                  >
                    <span> 登录 </span>
                  </button>

                  <!-- <div @click="forgetPassword" class="forget-password-btn">
                    <a>忘记密码</a>
                  </div> -->
                  <div @click="registerAccount" class="forget-password-btn">
                    <a>注册</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="login-pictures-text">
          <p class="login-pictures-title">康康邮箱，常联系！</p>
          <p>2500年前，人们飞鸽传书</p>
          <p>183年前，莫尔斯发明了电报</p>
          <p>50年前，第一封电子邮件发出</p>
          <p>今天，康康邮箱联系你、我、他</p>
        </div>
        <div
          class="login-right"
          style="
            background-image: url('https://rescdn.qqmail.com/zh_CN/htmledition/images/tg-chang1ea8a2.png');
            background-position: right 0;
            height: 381px;
            width: 392px;
            top: 50px;
            position: absolute;
            top: 100px;
            position: absolute;
            left: 1000px;
          "
        ></div>
      </div>

      <div
        class="footer"
        id="footer_id"
        style="line-height: 28px; padding: 6px 20px"
      >
        <span class="gray"
          >©2025 - 2052 Kangkang Inc. All Rights Reserved.</span
        >
        <div class="commonFrame_recordnumber">
          <a href="" target="_blank">粤公网安备 44030002000001号</a>
          <a href="" target="_blank">ICP备案号 粤B2-20090059</a>
          <a href="" target="_blank" class="last"
            >增值电信业务经营许可证 粤B2-20090059</a
          >
        </div>
      </div>
    </div>
  </body>
</template>

<script lang="ts" setup>
import axios from "axios";
import { ref, onMounted, watch, computed } from "vue";
import { useRouter } from "vue-router";

// 点击LOGO跳转
const openPage = () => {
  const openUrl = "https://staging.zhihaoscm.cn/";
  window.open(openUrl, "_blank");
};

/*  --------------------以下为点击tabs切换-------------------------------- */
const tabsItems: string[] = ["采购商", "联合购销商", "供应商"];
const currentActiveIndex = ref<number>(0);
const bgLeft = ref<number>(0);

const calBgPosition = () => {
  const tabElement = document.querySelectorAll(".tabs-item");
  if (tabElement.length > 0) {
    const nowTab = tabElement[currentActiveIndex.value] as HTMLElement;
    bgLeft.value = nowTab.offsetLeft;
  }
};

// 点击时更新currentActiveIndex的值
const handleTabClick = (index: number) => {
  currentActiveIndex.value = index;
  calBgPosition();
};

onMounted(() => {
  calBgPosition();
});

/*  --------------------以下为账号检验部分-------------------------------- */
const phoneNumber = ref<string>("");
const password = ref<string>("");
const isPhoneValid = ref<boolean>(true);
const isPasswordValid = ref<boolean>(true);
const submited = ref<boolean>(false);

const verifyPhone = () => {
  if (phoneNumber.value === "") {
    isPhoneValid.value = false;
  } else {
    const phoneType = /^1[3-9][0-9]{9}$/;
    isPhoneValid.value = phoneType.test(phoneNumber.value);
  }
};

const verifyPassword = () => {
  if (password.value === "") {
    isPasswordValid.value = false;
  } else {
    const passwordType = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
    isPasswordValid.value = passwordType.test(password.value);
  }
};

watch(phoneNumber, () => {
  verifyPhone();
});

watch(password, () => {
  verifyPassword();
});

/*  --------------------以下为卡片页脚部分,根据是否选中改变提示显示以及登录按钮的disable判断是否登录-------------------------------- */
const isChecked = ref<boolean>(false);
const forgetUrl = "https://staging.zhihaoscm.cn/login/findPassword";

const toggleCheckbox = () => {
  isChecked.value = !isChecked.value;
};

const isLoginDisabled = computed(() => {
  return !(isPhoneValid.value && isPasswordValid.value && isChecked.value);
});

// 点击登录跳转
const router = useRouter();

const loginJump = async () => {
  try {
    const requestData = {
      phone_number: phoneNumber.value,
      password: password.value,
    };

    const response = await axios.post(
      "http://localhost:3000/api/login",
      requestData
    );

    if (response.data.success) {
      // 打印 userInfo 到控制台
      console.log("User Info:", response.data.userInfo);
      // 登录成功，将用户信息存储到本地存储
      localStorage.setItem("userInfo", JSON.stringify(response.data.userInfo));
      // 使用 Vue Router 跳转到 /home 路由
      router.push("/home");
    } else {
      // 登录失败，显示错误信息
      alert(response.data.message);
    }
  } catch (error) {
    console.error("登录请求出错:", error);
    alert("登录请求出错，请稍后重试");
  }
};

// 点击忘记密码
const forgetPassword = () => {
  window.open(forgetUrl, "_blank");
};

// 点击注册
const registerAccount = () => {
  router.push("/register");
};
</script>

<style>
@font-face {
  font-family: "iconfont";
  src: url("../assets/font_4288702_kgc7wpnoc3/iconfont.woff2") format("woff2"),
    url("../assets/font_4288702_kgc7wpnoc3/iconfont.woff") format("woff")
      url("../assets/font_4288702_kgc7wpnoc3/iconfont.ttf") format("truetype");
}

.iconfont {
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  --el-button-bg-color: #ffdb5c;
  --el-button-text-color: #000;
  --el-button-border-color: #ffdb5c;
  --el-button-hover-bg-color: rgb(255, 230, 141);
  --el-button-hover-text-color: #000;
  --el-button-hover-border-color: rgb(255, 230, 141);
  --el-button-active-bg-color: rgb(208, 179, 78);
  --el-button-active-border-color: rgb(208, 179, 78);
  --el-color-theme: #ffdb5c;
  --el-color-theme-light-1: #fffdf7;
  --el-color-theme-light-2: #fff8de;
  --el-color-theme-light-3: #fff1be;
  --el-color-theme-light-4: #ffe99d;
  --el-color-theme-light-5: #ffe27d;
  --el-color-theme-dark-6: #ffdb5c;
  --el-color-theme-dark-7: #e8c755;
  --el-color-theme-dark-8: #d0b34e;
  --el-color-theme-dark-9: #b99f47;
  --el-color-button-text-color: #333333;
  --aliyun-zoom-ratio: 1;
  --aliyun-imgbox-height: 200px;
  --el-color-white: #fff;
  --el-color-black: #000;
  --el-color-primary-rgb: 64, 158, 255;
  --el-color-success-rgb: 103, 194, 58;
  --el-color-warning-rgb: 230, 162, 60;
  --el-color-danger-rgb: 245, 108, 108;
  --el-color-error-rgb: 245, 108, 108;
  --el-color-info-rgb: 144, 147, 153;
  --el-font-size-extra-large: 20px;
  --el-font-size-large: 18px;
  --el-font-size-medium: 16px;
  --el-font-size-base: 14px;
  --el-font-size-small: 13px;
  --el-font-size-extra-small: 12px;
  --el-font-family: "Helvetica Neue", Helvetica, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  --el-font-weight-primary: 500;
  --el-font-line-height-primary: 24px;
  --el-index-normal: 1;
  --el-index-top: 1000;
  --el-index-popper: 2000;
  --el-border-radius-base: 4px;
  --el-border-radius-small: 2px;
  --el-border-radius-round: 20px;
  --el-border-radius-circle: 100%;
  --el-transition-duration: 0.3s;
  --el-transition-duration-fast: 0.2s;
  --el-transition-function-ease-in-out-bezier: cubic-bezier(
    0.645,
    0.045,
    0.355,
    1
  );
  --el-transition-function-fast-bezier: cubic-bezier(0.23, 1, 0.32, 1);
  --el-transition-all: all var(--el-transition-duration)
    var(--el-transition-function-ease-in-out-bezier);
  --el-transition-fade: opacity var(--el-transition-duration)
    var(--el-transition-function-fast-bezier);
  --el-transition-md-fade: transform var(--el-transition-duration)
      var(--el-transition-function-fast-bezier),
    opacity var(--el-transition-duration)
      var(--el-transition-function-fast-bezier);
  --el-transition-fade-linear: opacity var(--el-transition-duration-fast) linear;
  --el-transition-border: border-color var(--el-transition-duration-fast)
    var(--el-transition-function-ease-in-out-bezier);
  --el-transition-box-shadow: box-shadow var(--el-transition-duration-fast)
    var(--el-transition-function-ease-in-out-bezier);
  --el-transition-color: color var(--el-transition-duration-fast)
    var(--el-transition-function-ease-in-out-bezier);
  --el-component-size-large: 40px;
  --el-component-size: 32px;
  --el-component-size-small: 24px;
  color-scheme: light;
  --el-color-primary: #409eff;
  --el-color-primary-light-3: #79bbff;
  --el-color-primary-light-5: #a0cfff;
  --el-color-primary-light-7: #c6e2ff;
  --el-color-primary-light-8: #d9ecff;
  --el-color-primary-light-9: #ecf5ff;
  --el-color-primary-dark-2: #337ecc;
  --el-color-success: #67c23a;
  --el-color-success-light-3: #95d475;
  --el-color-success-light-5: #b3e19d;
  --el-color-success-light-7: #d1edc4;
  --el-color-success-light-8: #e1f3d8;
  --el-color-success-light-9: #f0f9eb;
  --el-color-success-dark-2: #529b2e;
  --el-color-warning: #e6a23c;
  --el-color-warning-light-3: #eebe77;
  --el-color-warning-light-5: #f3d19e;
  --el-color-warning-light-7: #f8e3c5;
  --el-color-warning-light-8: #faecd8;
  --el-color-warning-light-9: #fdf6ec;
  --el-color-warning-dark-2: #b88230;
  --el-color-danger: #f56c6c;
  --el-color-danger-light-3: #f89898;
  --el-color-danger-light-5: #fab6b6;
  --el-color-danger-light-7: #fcd3d3;
  --el-color-danger-light-8: #fde2e2;
  --el-color-danger-light-9: #fef0f0;
  --el-color-danger-dark-2: #c45656;
  --el-color-error: #f56c6c;
  --el-color-error-light-3: #f89898;
  --el-color-error-light-5: #fab6b6;
  --el-color-error-light-7: #fcd3d3;
  --el-color-error-light-8: #fde2e2;
  --el-color-error-light-9: #fef0f0;
  --el-color-error-dark-2: #c45656;
  --el-color-info: #909399;
  --el-color-info-light-3: #b1b3b8;
  --el-color-info-light-5: #c8c9cc;
  --el-color-info-light-7: #dedfe0;
  --el-color-info-light-8: #e9e9eb;
  --el-color-info-light-9: #f4f4f5;
  --el-color-info-dark-2: #73767a;
  --el-bg-color: #fff;
  --el-bg-color-page: #f2f3f5;
  --el-bg-color-overlay: #fff;
  --el-text-color-primary: #303133;
  --el-text-color-regular: #606266;
  --el-text-color-secondary: #909399;
  --el-text-color-placeholder: #a8abb2;
  --el-text-color-disabled: #c0c4cc;
  --el-border-color: #dcdfe6;
  --el-border-color-light: #e4e7ed;
  --el-border-color-lighter: #ebeef5;
  --el-border-color-extra-light: #f2f6fc;
  --el-border-color-dark: #d4d7de;
  --el-border-color-darker: #cdd0d6;
  --el-fill-color: #f0f2f5;
  --el-fill-color-light: #f5f7fa;
  --el-fill-color-lighter: #fafafa;
  --el-fill-color-extra-light: #fafcff;
  --el-fill-color-dark: #ebedf0;
  --el-fill-color-darker: #e6e8eb;
  --el-fill-color-blank: #fff;
  --el-box-shadow: 0px 12px 32px 4px #0000000a, 0px 8px 20px #00000014;
  --el-box-shadow-light: 0px 0px 12px #0000001f;
  --el-box-shadow-lighter: 0px 0px 6px #0000001f;
  --el-box-shadow-dark: 0px 16px 48px 16px #00000014, 0px 12px 32px #0000001f,
    0px 8px 16px -8px #00000029;
  --el-disabled-bg-color: var(--el-fill-color-light);
  --el-disabled-text-color: var(--el-text-color-placeholder);
  --el-disabled-border-color: var(--el-border-color-light);
  --el-overlay-color: #000c;
  --el-overlay-color-light: #000000b3;
  --el-overlay-color-lighter: #00000080;
  --el-mask-color: #ffffffe6;
  --el-mask-color-extra-light: #ffffff4d;
  --el-border-width: 1px;
  --el-border-style: solid;
  --el-border-color-hover: var(--el-text-color-disabled);
  --el-border: var(--el-border-width) var(--el-border-style)
    var(--el-border-color);
  --el-svg-monochrome-grey: var(--el-border-color);
}

body {
  height: 100%;
  background-size: cover;
  width: 100%;
}

a {
  text-decoration: none;
  color: #333;
}

.login {
  display: flex;
  height: 85vh;
  width: 100vw;
}

.login-left {
  background: #fafafa;
  width: 33.7%;
}
.login-left-card {
  background: var(---gray-1, #fff);
  box-shadow: 0 10px 50px #d78e220f;
  height: 510px;
  left: 202.14166666666668px;
  position: absolute;
  top: 100px;
  box-sizing: border-box;
  padding: 0 20px 24px;

  width: 520px;
}

.card-type {
  align-items: center;
  display: flex;
  right: 0;
  position: absolute;
  top: 0;
}

.card-type-tip {
  align-items: center;
  display: flex;
  background-color: #fff8de;
  border: 1px solid #ffdb5c;
  border-radius: 3px;
  color: #333;
  cursor: pointer;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  height: 24px;
  justify-content: center;
  line-height: 12px;
  padding: 0 8px;
  position: relative;
  right: -10px;
}

.card-type-tip:after {
  background-color: #fff8de;
  border-right: 1px solid #ffdb5c;
  border-top: 1px solid #ffdb5c;
  content: "";
  height: 8px;
  position: absolute;
  right: -5px;
  top: 8px;
  transform: rotate(45deg);
  width: 8px;
  z-index: 1;
}

.card-type-box {
  background-color: #ffdb5c33;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%);
  cursor: pointer;
  height: 64px;
  position: relative;
  width: 64px;
}

.card-type-box .iconfont {
  color: #ffbe17;
  font-size: 45px;
  position: absolute;
  right: 10px;
  top: 10px;
}

.icon-code:before {
  content: "";
}

.icon-phone::before {
  content: "";
}

.card-header {
  align-items: center;
  display: flex;

  flex-direction: column;
  gap: 2px;
}
.card-header-logo {
  cursor: pointer;
  height: 60px;
  margin-top: -63px;
  width: 184px;
}
.card-header-title {
  color: #333;
  font-size: 24px;
  font-weight: 600;
}
.card-header-tips {
  color: #8e8e8e;
  font-size: 12px;
  font-weight: 400;
}

.card-main {
  margin-top: 20px;
  padding: 0 43px;
}
.tabs {
  text-align: center;
  align-items: center;
  background: #f8f8f8;
  border-radius: 6px;
  box-sizing: border-box;
  display: flex;
  height: 48px;
  justify-content: space-between;
  padding: 4px;
  position: relative;
  width: var(--912be86e);
}

.tabs-item {
  color: #666;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  height: 40px;
  line-height: 40px;
  position: relative;
  text-align: center;
  transition: all 0.3s;
  width: 131px;
  z-index: 1;
}

.tabs-item.active {
  border-radius: 6px;
  color: var(--el-color-button-text-color);
  flex-shrink: 0;
  font-size: 16px;
}

.tabs .bg {
  background: skyblue;
  border-radius: 6px;
  height: 40px;
  position: absolute;
  transition: all 0.3s;
  width: 131px;
}

.tabs .left {
  left: var(--6a23be95);
}
.card-main-tips {
  display: flex;
  justify-content: start;
  margin-bottom: 30px;
  margin-top: 30px;
}

.card-main-tips .active {
  color: #000;
  font-size: 18px;
}

.card-main-tips .tab {
  cursor: pointer;
  line-height: 18px;
}

.card-main-tips .account {
  width: 100px;
}

.card-main-tips-title {
  color: #000000a6;
  font-size: 14px;
  font-weight: 400;
}

.card-main-input {
  position: relative;
}

.el-form {
  --el-form-label-font-size: var(--el-font-size-base);
  --el-form-inline-content-width: 220px;
}

.card-main-input .el-form .el-form-item {
  margin-bottom: 10px;
}

.el-form-item__content {
  align-items: center;
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 32px;
  min-width: 0;
  position: relative;
}

.el-input {
  --el-input-text-color: var(--el-text-color-regular);
  --el-input-border: var(--el-border);
  --el-input-hover-border: var(--el-border-color-hover);
  --el-input-focus-border: var(--el-color-primary);
  --el-input-transparent-border: 0 0 0 1px #0000 inset;
  --el-input-border-color: var(--el-border-color);
  --el-input-border-radius: var(--el-border-radius-base);
  --el-input-bg-color: var(--el-fill-color-blank);
  --el-input-icon-color: var(--el-text-color-placeholder);
  --el-input-placeholder-color: var(--el-text-color-placeholder);
  --el-input-hover-border-color: var(--el-border-color-hover);
  --el-input-clear-hover-color: var(--el-text-color-secondary);
  --el-input-focus-border-color: var(--el-color-primary);
  --el-input-width: 100%;
  --el-input-height: var(--el-component-size);
  box-sizing: border-box;
  display: inline-flex;
  font-size: var(--el-font-size-base);
  line-height: var(--el-input-height);
  position: relative;
  vertical-align: middle;
  width: var(--el-input-width);
}

.card-main-input {
  height: 117.2px;
  width: 394px;
}

.card-main-input .el-input {
  margin-bottom: 20px;
}

.el-input__wrapper {
  align-items: center;
  background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
  background-image: none;
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
    inset;
  cursor: text;
  display: inline-flex;
  flex-grow: 1;
  justify-content: center;
  padding: 1px 11px;
  transform: translateZ(0);
  transition: var(--el-transition-box-shadow);
}

.el-input__wrapper {
  height: 32px;
}

.el-input__inner {
  --el-input-inner-height: calc(var(--el-input-height, 32px) - 2px);
  appearance: none;
  background: none;
  border: none;
  box-sizing: border-box;

  flex-grow: 1;

  height: var(--el-input-inner-height);
  line-height: var(--el-input-inner-height);
  outline: none;
  padding: 0;
  width: 100%;
}

.el-form-item__error {
  color: var(--el-color-danger);
  font-size: 12px;
  left: 0;
  line-height: 1;
  padding-top: 2px;
  position: absolute;
  top: 100%;
}

.card-main-input .el-form .el-form-item__error {
  top: 34px;
}

.card-main-input .el-input .el-input__wrapper {
  border-bottom: 2px solid #8d9ec1;
  border-radius: 0;
  box-shadow: none !important;
  padding: 0;
}

.card-main-input .el-input .el-input__wrapper .el-input__inner {
  color: #999;
  font-size: 14px;
  font-weight: 400;
  padding-bottom: 9px;
}

.captcha-btn {
  position: absolute;
  right: 0;
  top: -12px;
}

.el-button {
  --el-button-font-weight: var(--el-font-weight-primary);
  --el-button-border-color: var(--el-border-color);
  --el-button-bg-color: var(--el-fill-color-blank);
  --el-button-text-color: var(--el-text-color-regular);
  --el-button-disabled-text-color: var(--el-disabled-text-color);
  --el-button-disabled-bg-color: var(--el-fill-color-blank);
  --el-button-disabled-border-color: var(--el-border-color-light);
  --el-button-divide-border-color: #ffffff80;
  --el-button-hover-text-color: var(--el-color-primary);
  --el-button-hover-bg-color: var(--el-color-primary-light-9);
  --el-button-hover-border-color: var(--el-color-primary-light-7);
  --el-button-active-text-color: var(--el-button-hover-text-color);
  --el-button-active-border-color: var(--el-color-primary);
  --el-button-active-bg-color: var(--el-button-hover-bg-color);
  --el-button-outline-color: var(--el-color-primary-light-5);
  --el-button-hover-link-text-color: var(--el-color-info);
  --el-button-active-color: var(--el-text-color-primary);
  align-items: center;
  appearance: none;
  background-color: skyblue;
  border: var(--el-border);
  border-color: var(--el-button-border-color);
  border-radius: var(--el-border-radius-base);
  box-sizing: border-box;
  color: var(--el-button-text-color);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--el-font-size-base);
  font-weight: var(--el-button-font-weight);
  height: 32px;
  justify-content: center;
  line-height: 1;
  outline: none;
  padding: 8px 15px;
  text-align: center;
  transition: 0.1s;
  -webkit-user-select: none;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}

.el-button > span {
  align-items: center;
  display: inline-flex;
}

.captcha-btn .code-btn {
  font-weight: 400;
}

.card-main-tip {
  color: #999;
  font-size: 12px;
  font-weight: 400;
  margin-top: -5px;
}

.card-main-footer {
  align-items: baseline;
  display: flex;
  gap: 10px;
}

.card-main-footer .el-checkbox .el-checkbox__input.is-checked {
  background: var(--el-color-theme);
}

.el-checkbox.el-checkbox-small .el-checkbox__inner:after {
  height: 6px;
  width: 2px;
}

.card-main-footer
  .el-checkbox
  .el-checkbox__input.is-checked
  .el-checkbox__inner {
  background: var(--el-color-theme);
  border: 1px solid var(--el-color-theme);
}

.el-checkbox__input.is-checked .el-checkbox__inner:after {
  border-color: var(--el-checkbox-checked-icon-color);
  transform: rotate(45deg) scaleY(1);
}

.el-checkbox {
  --el-checkbox-font-size: 14px;
  --el-checkbox-font-weight: var(--el-font-weight-primary);
  --el-checkbox-text-color: var(--el-text-color-regular);
  --el-checkbox-input-height: 14px;
  --el-checkbox-input-width: 14px;
  --el-checkbox-border-radius: var(--el-border-radius-small);
  --el-checkbox-bg-color: var(--el-fill-color-blank);
  --el-checkbox-input-border: var(--el-border);
  --el-checkbox-disabled-border-color: var(--el-border-color);
  --el-checkbox-disabled-input-fill: var(--el-fill-color-light);
  --el-checkbox-disabled-icon-color: var(--el-text-color-placeholder);
  --el-checkbox-disabled-checked-input-fill: var(--el-border-color-extra-light);
  --el-checkbox-disabled-checked-input-border-color: var(--el-border-color);
  --el-checkbox-disabled-checked-icon-color: var(--el-text-color-placeholder);
  --el-checkbox-checked-text-color: var(--el-color-primary);
  --el-checkbox-checked-input-border-color: var(--el-color-primary);
  --el-checkbox-checked-bg-color: var(--el-color-primary);
  --el-checkbox-checked-icon-color: var(--el-color-white);
  --el-checkbox-input-border-color-hover: var(--el-color-primary);
  align-items: center;
  color: var(--el-checkbox-text-color);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--el-font-size-base);
  font-weight: var(--el-checkbox-font-weight);
  height: var(--el-checkbox-height, 32px);
  margin-right: 30px;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
}

.el-checkbox:last-of-type {
  margin-right: 0;
}
.el-checkbox.el-checkbox-small {
  height: 24px;
}

.el-checkbox__input {
  cursor: pointer;
  display: inline-flex;
  outline: none;
  position: relative;
  white-space: nowrap;
}

.el-checkbox.el-checkbox-small .el-checkbox__inner {
  height: 12px;
  width: 12px;
}

.el-checkbox__original {
  height: 0;
  margin: 0;
  opacity: 0;
  outline: none;
  position: absolute;
  width: 0;
  z-index: -1;
}

.el-checkbox.el-checkbox-small .el-checkbox__inner:after {
  height: 6px;
  width: 2px;
}

.el-checkbox__inner {
  background-color: var(--el-checkbox-bg-color);
  border: var(--el-checkbox-input-border);
  border-radius: var(--el-checkbox-border-radius);
  box-sizing: border-box;
  display: inline-block;
  height: var(--el-checkbox-input-height);
  position: relative;
  transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
    background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
    outline 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
  width: var(--el-checkbox-input-width);
  z-index: var(--el-index-normal);
}

.el-checkbox__inner:after {
  border: 1px solid #0000;
  border-left: 0;
  border-top: 0;
  box-sizing: initial;
  content: "";
  height: 7px;
  left: 4px;
  position: absolute;
  top: 1px;
  transform: rotate(45deg) scaleY(0);
  transform-origin: center;
  transition: transform 0.15s ease-in 0.05s;
  width: 3px;
}

.card-main-footer-msg {
  color: #666;
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
}

.card-main-footer-msg .error-msg {
  color: var(--el-color-danger);
  font-size: 12px;
}

.card-main .footer-padding-top-18 {
  padding-top: 18px;
}

.card-main-footer-msg span {
  color: #333;
  cursor: pointer;
  text-decoration-line: underline;
}

.card-main-footer-msg span {
  color: #333;
  cursor: pointer;
  text-decoration-line: underline;
}

.card-main-btn {
  margin-top: 25px;
}

.card-main-btn .el-button {
  color: var(--el-color-button-text-color);
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  padding: 17px 0;
  width: 100%;
}

.card .captcha-wrap {
  align-items: center;
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 188px;
  width: 100%;
  z-index: 10;
}

.card-main-btn .forget-password-btn {
  color: #000000a6;
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  margin-top: 12px;
  text-align: center;
}

.forget-password-btn.active {
  display: none;
}

.card-main-qrcode {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.card-main-qrcode #qrcode-container {
  margin-top: 25px;
}

.card-main-qrcode #qrcode-container img {
  height: 230px;
}

.card-main-qrcode-tip {
  align-items: center;
  color: #333;
  display: flex;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  justify-content: center;
  line-height: 16px;
  margin-top: 25px;
  text-transform: capitalize;
}

.card-main-qrcode-tip .iconfont {
  color: #4cbf00;
  font-size: 18px;
  font-weight: 400;
  margin-right: 8px;
}

.login-right {
  background-size: cover;
  width: 66.3%;
}

.login-pictures-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  padding-top: 25px;
  position: relative;
  left: 240px;
  top: 80px;
}

.login-pictures-title {
  color: #6f95c8;
  font-size: 24px;
  font-weight: 400;
  line-height: 26px;
  margin-bottom: 15px;
  margin-top: 15px;
}

.footer {
  background-color: #eff4fa;
  border-top: 1px solid #d6dfea;
  bottom: 0;
  clear: both;
  color: #b6b6b6;
  left: 0;
  line-height: 36px;
  position: static;
  _position: static;
  right: 0;
  text-align: center;
  z-index: 2;
}

.gray {
  color: #868686;
}

.commonFrame_recordnumber {
  line-height: 20px;
  margin-bottom: 5px;
}

.commonFrame_recordnumber a {
  color: #868686;
  margin-right: 16px;
}

.commonFrame_recordnumber a.last {
  margin-right: 0;
}
</style>
